<template>
  <div>
    <div style="margin: 10px 0">
      <el-carousel height="450px" :interval="3000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt=""/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin: 10px 0">
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px;">
          <div style="border: 1px solid #ccc;padding: 10px 0">
            <img :src="item.url" alt="" style="width: 100%"/>
            <div style="padding: 10px">{{item.name}}</div>
            <div style="padding: 10px"><el-button type="primary">购买</el-button></div>
          </div>

        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data(){
    return{
      imgs:[
          'https://img13.360buyimg.com/pop/s1180x940_jfs/t1/180153/20/15400/49130/60fa8c14Ee430b6dc/a729cf24d776bf94.jpg.webp',
      'https://imgcps.jd.com/ling4/100019718275/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6eb/bda17934/cr/s/q.jpg'],
      files:[]
    }
  },
  created() {
    this.request.get("/file/getAll").then(res=>{
      this.files=res.data.filter(v => v.type==='png'||v.type==='jpeg'||v.type==='gif')
    })
  },
  methods:{}
}
</script>

<style scoped>

</style>